<template>
	<view class="index">
		<view class="left">
			
			<view class="navi">
				<menus
				class="control-menus"
				:options='console_menus' 
				:selectedIndex="cm_selected"
				@click="cm_selectedClick"/>
			</view>
			<console-box v-if="cm_selected == 0" style="height: 1px; flex: 1;" :status="redbookRoomStatus"/>
			<join-story v-if="cm_selected == 1" style="height: 1px; flex: 1;" story_type="audience_join_v2" :status="redbookRoomStatus"/>
			<join-story v-if="cm_selected == 2" style="height: 1px; flex: 1;" story_type="text" :status="redbookRoomStatus"/>
			<console-gifts v-if="cm_selected == 3" style="height: 1px; flex: 1;" :status="redbookRoomStatus"/>
			<console-sort v-if="cm_selected == 4" style="height: 1px; flex: 4;" type="normal" :status="redbookRoomStatus"/>
			<console-sort v-if="cm_selected == 5" style="height: 1px; flex: 1;" type="all" :status="redbookRoomStatus"/>
		</view>
		<view class="right">

			<view class="navi">
				<menus
				class="control-menus"
				:options='control_menus' 
				:selectedIndex="control_menu_selectedIndex" 
				:scene_selectedIndex="scene_selectedIndex + 1"
				@click="controlMenuClick"/>
				<view class="scene-mod-switch">
					<!-- <rb-bottom-a @click="sceneEditClick">
						<block v-if="sceneIsEdit">场景投放</block>
						<block v-else>场景编辑</block>
					</rb-bottom-a> -->
					<icon-switch data-tooltip="直播模拟，仅供参考" v-if="sceneIsEdit" icon="/static/moni_icon.png" style="margin-right: 3px;" :selected="mobileMoni" @click="moniClick"/>
					<icon-switch data-tooltip="最小化场景" icon="/static/min_size.png" style="margin-right: 3px;" :selected="mobileIsMin" @click="mobileIsMinClick"/>
					<icon-switch data-tooltip="场景投放" icon="/static/tou_fang_icon.png" :selected="!sceneIsEdit" @click="sceneEditClick"/>
				</view>
			</view>

			<view v-if="control_menu_selectedIndex <= 0" style="color: white; height: 1px; flex: 1;">
				<setting/>
			</view>
			<view v-else style="color: white; height: 1px; flex: 1;">
				<mobile-scene-controller 
				ref="current_scene"
				:edit="sceneIsEdit" 
				:index="scene_selectedIndex"
				@changeCptExt="changeCptExt"/>
			</view>
		</view>
		
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message 
			:type="alertMsgInfo.msgType" 
			:message="alertMsgInfo.messageText" 
			:duration="1000">
			</uni-popup-message>
		</uni-popup>
		
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog 
			:type="alertDialogInfo.msgType" 
			:confirmText="alertDialogInfo.confirmText" 
			:title="alertDialogInfo.title" 
			:content="alertDialogInfo.content" 
			:showClose="alertDialogInfo.showClose"
			:cancelText="alertDialogInfo.cancelText"
			@confirm="dialogConfirm"
			@close="dialogClose">
			</uni-popup-dialog>
		</uni-popup>
					
	</view>
</template>

<script>
	
	import consoleBox from '@/components/console-box/console-box.vue'
	import joinStory from '@/components/join-story/join-story.vue'
	import consoleSort from '@/components/console-sort/console-sort.vue'
	import consoleGifts from '@/components/console-gifts/console-gifts.vue'
	import menus from '@/components/menus/menus.vue'
	import mobileSceneController from '@/components/mobile-scene-controller/mobile-scene-controller.vue'
	import rbBottomA from '@/components/rb-bottom-a/rb-bottom-a.vue'
	import setting from '@/components/setting/setting.vue'
	import iconSwitch from '@/components/icon-switch/icon-switch.vue'
	
	export default {
		components: {
			consoleBox,
			joinStory,
			consoleGifts,
			menus,
			mobileSceneController,
			rbBottomA,
			setting,
			iconSwitch,
			consoleSort
		},
		data() {
			return {
				console_menus: [
					{
						title: '总信息台',
						m_type: 'link',
						status: 0
					},
					{
						title: '进入',
						m_type: 'normal'
					},
					{
						title: '评论',
						m_type: 'normal'
					},
					{
						title: '礼物',
						m_type: 'normal'
					},
					{
						title: '本场榜',
						m_type: 'normal'
					},
					{
						title: '总榜',
						m_type: 'normal'
					}
				],
				cm_selected: 0,
				startTime: 0,
				duration: 1000,
				animationId: null,
				redbookRoomStatus: 0,
				control_menus: [{
					title: '通用设置',
					m_type: 'setting'
				}],
				control_menu_selectedIndex: 0,
				scene_selectedIndex: -1,
				sceneIsEdit: false,
				alertMsgInfo: {
					msgType: 'success',
					messageText: '这是一条成功提示'
				},
				alertDialogInfo: {
					type: '',
					msgType: 'warn', // success error warn info
					showClose: true,
					cancelText: '关闭',
					confirmText: '确定',
					title: '',
					content: ''
				},
				mobileMoni: false, 
				mobileIsMin: false
			}
		},
		onLoad() {
			// 小红书直播间状态发生变化
			window.electronAPI.onRedbookRoomStatusChanged((status) => {
				this.console_menus[0].status = status
				this.redbookRoomStatus = status
			})
			// 小红书发来的信息
			window.electronAPI.onReceivedMsg((msg) => {
				const msgData = JSON.parse(this.Atob(msg))
				const customData = JSON.parse(msgData.customData)
				console.log(msgData)
				// 加入直播间
				if (customData.type == 'refresh') {
					console.log(customData)
					console.log('房间roomId:' + msgData?.roomId)
					console.log('消息ID:' + msgData?.msgId)
					console.log('房间观众：【')
					for (let s of customData?.room_data?.viewers) {
						console.log('            user_id:' + s.user_id)
						console.log('            nickname:' + s.nickname)
						console.log('            avatar:' + s.avatar)
						console.log(',')
					}
					console.log('            】')
				}
				
				// 加入直播间
				if (customData.type == 'audience_join_v2') {
					console.log(customData)
					console.log('用户头像' + customData?.profile?.avatar)
					console.log('用户昵称' + customData?.profile?.nickname)
					console.log('用户user_id' + customData?.profile?.user_id)
					console.log('房间roomId:' + msgData?.roomId)
					console.log('消息ID:' + msgData?.msgId)
				}
				
				// 评论
				if (customData.type == 'text') {
					console.log(customData)
					console.log('用户头像' + customData?.profile?.avatar)
					console.log('用户昵称' + customData?.profile?.nickname)
					console.log('用户user_id' + customData?.profile?.user_id)
					console.log(customData.desc)
					console.log('房间roomId:' + msgData?.roomId)
					console.log('消息ID:' + msgData?.msgId)
				}
				// 点赞
				if (customData.type == 'praise') {
					console.log(customData)
					console.log('用户头像' + customData?.profile?.avatar)
					console.log('用户昵称' + customData?.profile?.nickname)
					console.log('用户user_id' + customData?.profile?.user_id)
					console.log('点赞次数:' + customData.praise_info.count)
					console.log('房间roomId:' + msgData?.roomId)
					console.log('消息ID:' + msgData?.msgId)
				}
				
				// 每次送礼均会收到，包括连击
				if (customData.type == 'gift_dock_and_effect') {
					console.log(customData)
					console.log('用户头像' + customData?.send_user_info?.avatar)
					console.log('用户昵称' + customData?.send_user_info?.nick_name)
					console.log('用户user_id' + customData?.send_user_info?.id)
					console.log('礼物票:' + customData?.base_gift_info?.coins)
					console.log('礼物id:' + customData?.base_gift_info?.id)
					console.log('礼物名字:' + customData?.base_gift_info?.name)
					console.log('礼物图标:' + customData?.base_gift_info?.icon)
					console.log('房间roomId:' + msgData?.roomId)
					console.log('消息ID:' + msgData?.msgId)
				}
				
				// 每次送礼彻底完毕后收到，连击只收到最后一次
				if (customData.type == 'gift_comment') {
					// console.log(customData)
				}
			})
			// 获取所有场景
			window.electronAPI.allMobileScene().then((sceneInfo) => {
				this.control_menus = this.control_menus.concat(sceneInfo.scenes)
				this.control_menus.push({
					m_type: 'add'
				})
				this.scene_selectedIndex = sceneInfo.index
			})
			// 获取场景编辑/投放状态
			window.electronAPI.mobileSceneIsEdit().then((edit) => {
				this.sceneIsEdit = edit
			})
			// 场景编辑/投放状态变化
			window.electronAPI.mobileSceneIsEditChanged((edit) => {
				this.sceneIsEdit = edit
			})
			// window.electronAPI.addComponentToWin((cInfo) => {
			// 	let allComponents = this.control_menus[this.scene_selectedIndex].allComponents
			// 	if (allComponents) {
			// 		allComponents.push(cInfo)
			// 	} else {
			// 		allComponents = [cInfo]
			// 	}
			// 	this.control_menus[this.scene_selectedIndex].allComponents = allComponents
			// 	this.control_menus = JSON.parse(JSON.stringify(this.control_menus))
			// })
			window.electronAPI.onGoToSelectCurrentSceneHtml((index) => {
				if (this.control_menu_selectedIndex != index + 1) {
					this.control_menu_selectedIndex = index + 1
					this.scene_selectedIndex = index
				}
			})

			// 场景内容发生变化
			window.electronAPI.noticeSceneChanged((scene, index, cpt_index, from) => {
				if (from != 'index') {
					this.$set(this.control_menus, index + 1, scene)
				}
			})
			
			// 获取模拟场景是否打开
			window.electronAPI.mobileFrameMoni().then((moni) => {
				this.mobileMoni = moni
			})
			
			// 获取模拟器是否最小化
			window.electronAPI.mobileFrameIsMin().then((min) => {
				this.mobileIsMin = min
			})
			window.electronAPI.onMobileFrameSetMinOrMax((min) => {
				this.mobileIsMin = min
			})
		},
		onUnload() {
			window.electronAPI.removeOnRedbookRoomStatusChanged()
			window.electronAPI.removeMobileSceneIsEditChanged()
			// window.electronAPI.removeAddComponentToWin()
			window.electronAPI.removeOnGoToSelectCurrentSceneHtml()
			// 移除 场景内容发生变化监听
			window.electronAPI.removeNoticeSceneChanged()
			window.electronAPI.removeOnMobileFrameSetMinOrMax()
		},
		methods: {

			/**
			 * 数据解密
			 * @param {Object} encoded 加密数据
			 */
			Atob(encoded) {
			  try {
			    // 使用 atob 解码 base64 字符串
			    const decoded = atob(encoded);
			    return decoded;
			  } catch (err) {
			    // 返回错误信息
			    console.error('Base64 解码失败:', err);
			    return null;
			  }
			},
			
			cm_selectedClick(index) {
				this.cm_selected = index
			},
			
			mobileIsMinClick() {
				this.mobileIsMin = !this.mobileIsMin
				window.electronAPI.mobileFrameSetMinOrMax(this.mobileIsMin)
			},
			
			moniClick() {
				this.mobileMoni = !this.mobileMoni
				window.electronAPI.mobileFrameMoniChangeTo(this.mobileMoni)
			},
			
			dialogConfirm() {
			},
			
			dialogClose() {
			},
			
			controlMenuClick(index) {
				if (this.control_menus[index].m_type == 'add') {
					// 创建新场景
					window.electronAPI.createMobileScene().then((scene) => {
						this.control_menus.splice(this.control_menus.length - 1, 0, scene)
						this.control_menu_selectedIndex = index
						this.scene_selectedIndex = index - 1
						window.electronAPI.selectMobileScene(this.scene_selectedIndex)
					})
					return
				}
				if (this.control_menus[index].m_type == 'setting') {
					// 主播设置
					this.control_menu_selectedIndex = index
				} else {
					this.scene_selectedIndex = index - 1
					this.control_menu_selectedIndex = index
					window.electronAPI.selectMobileScene(index - 1)
				}
			},

			sceneEditClick() {
				window.electronAPI.mobileSceneEditChangeTo(!this.sceneIsEdit)
			},
			
			changeCptExt(opt) {
				// let cpt = this.control_menus[this.scene_selectedIndex + 1].allComponents[opt.index]
				// cpt.ext = opt.ext
				// let n_scene = JSON.parse(JSON.stringify(this.control_menus[this.scene_selectedIndex + 1]))
				// this.$refs.current_scene.resetLocal(n_scene)
				// this.$set(this.control_menus, this.scene_selectedIndex + 1, n_scene)
				// window.electronAPI.updateSceneCptToMain(n_scene, ['mobileFrame'])
			}
		},
	}
</script>

<style scoped>

	.index {
		width: 100%;
		height: 100vh;
		background-color: #0e0e11;
		display: flex;
	}

	.left {
		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
		height: calc(100% - 20px);
		width: 400px;
		-webkit-app-region: no-drag;
		display: flex;
		flex-direction: column;
	}
	
	.right {
		margin: 10px;
		height: calc(100% - 20px);
		width: 1px;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.navi {
		display: flex;
	}
	
	.control-menus {
		width: 1px;
		flex: 1;
	}
	
	.scene-mod-switch {
		/* margin-right: 10px; */
		/* margin-left: 5px; */
		display: flex;
		
		/* margin:0;
		display: flex; 
		align-items: center; 
		justify-content: center; 
		background: rgba(50,50,50,0.9); 
		color: white; font-size:13px; 
		border-radius: 8px; 
		font-family:sans-serif;
		overflow: hidden; */
	}
	

</style>
